/* eslint-disable react/no-access-state-in-setstate */
import * as React from 'react';
import YunDouTalk from './Talk/YunDouTalk/index';
import SelfTalk from './Talk/SelfTalk/index';
import jump from 'jump.js';
import { YunxiaoIcon } from '@alife/devops-ui';
import { navigateOpen } from 'utils/router';
import './index.scss';
import intl from '../../locale';

const prefix = 'Lead';

// 新手引导
class Lead extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      steps: [],
      currentStep: 0,
      leftStyle: null,
      rightStyle: null,
      bottomStyle: null,
      topStyle: null,
    };
  }

  // 清除蒙板样式
  clearStyles = () => {
    this.setState({
      leftStyle: null,
      rightStyle: null,
      bottomStyle: null,
      topStyle: null,
    });
  };

  renderStyles = () => {
    const lEl = document.getElementById('theia-main-content-panel');
    const trbEls = document.getElementsByClassName('lineHighlightDecoration');

    const { clientWidth } = document.body;
    const { clientHeight } = document.body;

    if (lEl && trbEls) {
      const trbElsLength = trbEls.length;
      const topGroup = [];
      const bottomGroup = [];

      for (let i = 0; i < trbElsLength; i++) {
        topGroup.push(trbEls[i].getBoundingClientRect().top);
        bottomGroup.push(trbEls[i].getBoundingClientRect().bottom);
      }

      topGroup.sort((a, b) => a - b);
      bottomGroup.sort((a, b) => b - a);

      const { left } = lEl.getBoundingClientRect();
      const right = clientWidth - trbEls[0].getBoundingClientRect().right;
      const top = topGroup[0];
      const bottom = clientHeight - bottomGroup[0];

      this.setState({
        leftStyle: {
          width: left,
        },

        rightStyle: {
          width: right,
        },

        bottomStyle: {
          width: clientWidth - left - right,
          left,
          height: bottom,
        },

        topStyle: {
          left,
          height: top,
          width: clientWidth - left - right,
        },
      });

      const a = {
        leftStyle: {
          width: left,
        },

        rightStyle: {
          width: right,
        },

        bottomStyle: {
          width: clientWidth - left - right,
          left,
          height: bottom,
        },

        topStyle: {
          left,
          height: top,
          width: clientWidth - left - right,
        },
      };

      console.log('lead a', a);
    }
  };

  leadSteps = [
    {
      id: 0,
      left: {
        message: [
          {
            title: (
              <span>
                {intl.get({
                  id: 'code-assets.components.Lead.IHaveOtherAbilities',
                  defaultMessage: '我还有其他能力哦',
                })}
                <br />
                {intl.get({
                  id: 'code-assets.components.Lead.FourCoreCapabilitiesProtectYour',
                  defaultMessage: '四大核心能力守护你的代码',
                })}
              </span>
            ),
          },
          {
            content: (
              <div>
                <div>
                  <YunxiaoIcon type="true-line" className="doc-func-tick" />
                  <span className="doc-func-item">
                    {intl.get({
                      id: 'code-assets.components.Lead.CodeHosting',
                      defaultMessage: '代码托管',
                    })}
                  </span>
                  <YunxiaoIcon
                    type="true-line"
                    className="doc-func-tick"
                    style={{ marginLeft: 34 }}
                  />
                  <span className="doc-func-item">
                    {intl.get({
                      id: 'code-assets.components.Lead.SecurityDetection',
                      defaultMessage: '安全检测',
                    })}
                  </span>
                </div>
                <div style={{ marginTop: 8 }}>
                  <YunxiaoIcon type="true-line" className="doc-func-tick" />
                  <span className="doc-func-item">
                    {intl.get({
                      id: 'code-assets.components.Lead.IntelligentReview',
                      defaultMessage: '智能评审',
                    })}
                  </span>
                  <YunxiaoIcon
                    type="true-line"
                    className="doc-func-tick"
                    style={{ marginLeft: 34 }}
                  />
                  <span className="doc-func-item">
                    {intl.get({
                      id: 'code-assets.components.Lead.DocumentManagement',
                      defaultMessage: '文档管理',
                    })}
                  </span>
                </div>
              </div>
            ),
          },

          {
            content: (
              <div className="doc-desc">
                <span className="doc-desc-content">
                  <span dangerouslySetInnerHTML={{ __html: '&#128079' }} />{' '}
                  {intl.get({
                    id: 'code-assets.components.Lead.TimeLimitedDiscountUnlimitedCapacity',
                    defaultMessage: '限时优惠~不限容量和人数',
                  })}
                </span>
              </div>
            ),
          },
        ],
      },
    },

    {
      id: 1,
      right: {
        messageType: 'BUTTONS',
        content: [
          intl.get({ id: 'code-assets.components.Lead.NoThanks', defaultMessage: '不了，谢谢' }),
          intl.get({ id: 'code-assets.components.Lead.FreeUse', defaultMessage: '免费使用' }),
        ],
        onClickType1: () => {
          // 收到先撤
          setTimeout(() => {
            this.updateStep(2);
            // 然后关闭引导
            setTimeout(() => {
              this.props.onClose && this.props.onClose();
            }, 3000);
          }, 500);
        },
        onClickType2: () => {
          // 打开创建企业页面，增加channel参数，然后关闭引导
          navigateOpen(
            'https://accountid-devops.aliyun.com/create-org?appId=5e730cf2201d20d717988e46&channel=yy_1024',
            '_blank',
          );
          this.props.onClose && this.props.onClose();
        },
      },
    },

    {
      id: 2,
      left: {
        message: [
          {
            title: intl.get({
              id: 'code-assets.components.Lead.ReceivedIWillWithdrawFirst',
              defaultMessage: '收到~我先撤了',
            }),
          },
          {
            content: intl.get({
              id: 'code-assets.components.Lead.AnytimeWithPokeMeOh',
              defaultMessage: '有问题随时戳我哦',
            }),
          },
        ],
      },
    },
  ];

  getOffsetTop = (id) => {
    const el = document.getElementById(`step-${id}`);
    return el && el.offsetTop;
  };

  scrollSmooth = (id) => {
    const offsetTop = this.getOffsetTop(id);
    if (offsetTop && offsetTop > 88) {
      jump(`#step-${id}`, {
        offset: -(Number(offsetTop) - 88),
      });
    }
  };

  updateStep = (id) => {
    if (id) {
      const currentSteps = this.state.steps;
      currentSteps.push(this.leadSteps[id]);

      this.setState({
        steps: currentSteps,
        currentStep: id,
      });

      this.scrollSmooth(id);
    } else {
      const currentSteps = this.state.steps;
      currentSteps.push(this.leadSteps[this.state.currentStep]);

      this.setState({
        steps: currentSteps,
        currentStep: this.state.currentStep + 1,
      });

      this.scrollSmooth(this.state.currentStep);
    }
  };

  componentDidMount() {
    this.props.onStart && this.props.onStart();

    this.updateStep();

    setTimeout(() => {
      this.updateStep();
    }, 1000);
  }

  render() {
    return (
      <div className={prefix} id={'leadPage'}>
        <div className={'LeadMaskLeft LeadMask'} style={this.state.leftStyle} />

        <div className={'LeadMaskTop LeadMask'} style={this.state.topStyle} />

        <div className={'LeadMaskRight LeadMask'} style={this.state.rightStyle} />

        <div className={'LeadMaskBottom LeadMask'} style={this.state.bottomStyle} />

        <div className={'LeadBox'} id={'leadBox'}>
          {this.state.steps.map((step) => {
            return (
              <>
                {step.left && (
                  <div
                    className={'LeadMessage LeadMessageLeft'}
                    key={step.id}
                    id={`step-${step.id}-wrap`}
                  >
                    <YunDouTalk message={step.left.message} shine={step.shine} />
                  </div>
                )}

                {step.right && (
                  <div
                    className={'LeadMessage LeadMessageRight'}
                    key={step.id}
                    id={`step-${step.id}-wrap`}
                  >
                    <SelfTalk
                      messageType={step.right.messageType}
                      content={step.right.content}
                      onClickType1={step.right.onClickType1}
                      onClickType2={step.right.onClickType2}
                      id={`step-${step.id}`}
                    />
                  </div>
                )}
              </>
            );
          })}
        </div>
      </div>
    );
  }
}

export default Lead;
